<template>
  <div class="car-adder">
    <el-dialog
      center
      class="geng-el-dialog"
      title="录入新车辆"
      :visible.sync="isShow"
      @open="handleOpen"
    >

      <el-form
        label-width="150px"
        label-position="right"
        ref="form"
        :model="form"
        :rules="rules"
      >
        <el-form-item label="车辆名称" prop="name">
          <el-input clearable v-model="form.name"/>
        </el-form-item>
        <el-form-item label="车辆型号" prop="unit_type">
          <el-input clearable v-model="form.unit_type"/>
        </el-form-item>
        <el-form-item label="空车质量" prop="empty_quality">
          <el-input clearable v-model="form.empty_quality"/>
        </el-form-item>
        <el-form-item label="满载总重" prop="full_payload_weight">
          <el-input clearable v-model="form.full_payload_weight"/>
        </el-form-item>
        <el-form-item label="最高车速（KM/H）" prop="max_speed">
          <el-input clearable v-model="form.max_speed"/>
        </el-form-item>
        <el-form-item label="最小转弯半径（M）" prop="min_turning_radius">
          <el-input clearable v-model="form.min_turning_radius"/>
        </el-form-item>
        <el-form-item label="全长（mm）" prop="overall_length">
          <el-input clearable v-model="form.overall_length"/>
        </el-form-item>
        <el-form-item label="总宽（mm）" prop="overall_width">
          <el-input clearable v-model="form.overall_width"/>
        </el-form-item>
        <el-form-item label="空载高度（mm）" prop="noload_height">
          <el-input clearable v-model="form.noload_height"/>
        </el-form-item>
      </el-form>

      <span class="dialog-footer" slot="footer">
        <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
        <el-button size="mini" plain type="primary" @click="isShow = false">取 消</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import commonElDialogMixin from '@/mixins/common-el-dialog-mixin'

export default {
  name: "CarAdder",

  mixins: [commonElDialogMixin],

  data() {
    return {
      rules: {
        name: [
          {required: true, message: '请填写车辆名称', trigger: 'blur'},
          {min: 2, max: 32, message: '请填写2到32位长度的车辆名称', trigger: 'blur'}
        ],
        unit_type: [
          {required: true, message: '请填写车辆型号', trigger: 'blur'},
          {min: 6, max: 12, message: '请填写6到12位长度的车辆型号', trigger: 'blur'}
        ],
        empty_quality: [
          {required: true, message: '请填写空车质量', trigger: 'blur'},
          {pattern: /^(\d+)(\.\d+)?$/, message: '请填写合法的数值', rigger: 'blur'}
        ],
        full_payload_weight: [
          {required: true, message: '请填写满载质量', trigger: 'blur'},
          {pattern: /^(\d+)(\.\d+)?$/, message: '请填写合法的数值', rigger: 'blur'}
        ],
        max_speed: [
          {required: true, message: '请填写最高车速', trigger: 'blur'},
          {pattern: /^(\d+)(\.\d+)?$/, message: '请填写合法的数值', rigger: 'blur'}
        ],
        min_turning_radius: [
          {required: true, message: '请填写最小转弯半径', trigger: 'blur'},
          {pattern: /^(\d+)(\.\d+)?$/, message: '请填写合法的数值', rigger: 'blur'}
        ],
        overall_length: [
          {required: true, message: '请填写车辆全长', trigger: 'blur'},
          {pattern: /^(\d+)(\.\d+)?$/, message: '请填写合法的数值', rigger: 'blur'}
        ],
        overall_width: [
          {required: true, message: '请填写车辆总宽度', trigger: 'blur'},
          {pattern: /^(\d+)(\.\d+)?$/, message: '请填写合法的数值', rigger: 'blur'}
        ],
        noload_height: [
          {required: true, message: '请填写车辆空载高度', trigger: 'blur'},
          {pattern: /^(\d+)(\.\d+)?$/, message: '请填写合法的数值', rigger: 'blur'}
        ]
      }
    }
  },

  methods: {
    handleConfirm() {
      this.$refs['form'].validate(isValid => {
        if (isValid) {
          // todo api call
        } else {
          this.$message.warning('请检查您填写的信息')
        }
      })
    }
  }
}
</script>